import React, { Component } from 'react'
import styles from './index.less'
import moment from 'moment';
import locale from 'antd/lib/date-picker/locale/zh_CN';
moment.locale('zh-cn');

import {
    Button, Icon, Input, Progress, Form, Modal, DatePicker, message
} from 'antd';
const { TextArea } = Input;


class SendSmsView extends Component {

    state = { 
        visible: false,
        setTiming: null,
        centextLength: 0
    }

    handleSubmit = ()=>{
        console.log("sendSms")
        const { dispatch, sendList, form:{ getFieldsValue } } = this.props
        if(!sendList.length > 0){
            message.error('发送电话列表不能为空');
            return
        }
        this.props.form.validateFields(
          (err) => {
            if (!err) {
                const { setTiming } = this.state
                const { theme, context} = getFieldsValue()
                console.log(theme, context, setTiming, sendList)
                dispatch({
                    type: 'sms/fetchSendSms',
                    payload: {
                        theme: theme,
                        context: context,
                        sendTime: setTiming,
                        telBookList: sendList
                    }
                })
            }
          },
        );
    }

    showModal = () => {
        this.setState({
          visible: true,
        });
    }

    handleOk = (e) => {
        this.setState({
            visible: false,
        });
    }

    handleCancel = (e) => {
        this.setState({
            visible: false,
            setTiming: null
        });
    }

    timeOnChange = (e) => {
        this.setState({
            setTiming: e
        })
    }

    render() {
        const {
            form: { getFieldDecorator },
        } = this.props
        const {
            setTiming,
            centextLength
        } = this.state
        return (
                <div className = {styles.sms}>
                    <Form>
                        <Form.Item>
                        {getFieldDecorator('theme', {
                            rules: [{
                                required: true, message: '请输入主题'
                            },{ max:100, message: '主题不能超过100个字'}],
                        })(
                            <Input prefix={<Icon type="profile" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder={'短信主题'} />
                        )}
                        </Form.Item>
                    </Form>
                    <Form.Item>
                        {getFieldDecorator('context', {
                            rules: [{
                                required: true, message: '短信内容'
                            },{ max:1000, message: '短信内容不能超过1000个字'}],
                        })(
                            <TextArea className = {styles.smsInput} placeholder = "短信内容"
                                onChange = {(e)=>{
                                    this.setState({
                                        centextLength: e.target.value.length
                                    })
                                }} >
                            </TextArea>
                        )}
                    </Form.Item>
                    
                    <div className = {styles.sendBox}>
                        <div className = {styles.btnList}>
                        <Button className = {styles.sendBtn}
                            onClick = {this.handleSubmit}
                            >发送</Button>
                        <Button className = {styles.sendBtn} 
                            onClick = {this.showModal}
                            >定时</Button>
                            {setTiming?
                            <span className = {styles.sendBtn} >{moment(setTiming).format('YYYY-MM-DD HH:mm:ss')}</span>
                            :null
                            }
                        </div>
                        <div className = {styles.sendState}>
                            <span>{centextLength}/1000</span>
                        </div>
                    </div>
                    <Modal
                        title="定时"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        okText="确定"
                        cancelText="取消"
                        >   
                            设置发送时间：
                            <DatePicker 
                                value={setTiming}
                                locale={locale}
                                format="YYYY-MM-DD HH:mm:ss"
                                onChange={this.timeOnChange}
                                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                            />
                    </Modal>
                </div>
        )
    }
}

const SendSmsViewForm = Form.create({})(SendSmsView);

export default SendSmsViewForm